<template>
  <div>
    <DialogForm
      v-model="dialogVisible"
      title="添加角色信息"
      :cancel-button="true"
      :confirm-button="true"
      @confirm="confirmHandler"
    >
      <template #content>
        <RoleBaseForm v-model="data"/>
      </template>
    </DialogForm>
  </div>
</template>

<script>
import { ref } from 'vue'
import { insertRole } from '@/api/role'
import DialogForm from '@/components/dialog/DialogForm'
import RoleBaseForm from '@/views/permission/role/form/base/RoleBaseForm'

export default {
  name: 'InsertRoleForm',
  components: { RoleBaseForm, DialogForm },
  setup () {
    return {
      confirmLoading: ref(false),
      dialogVisible: ref(false),
      data: ref({
        name: '',
        description: ''
      })
    }
  },
  methods: {
    confirmHandler () {
      if (!this.data) {
        this.dialogVisible = false
      } else if (this.data) {
        this.confirmLoading = true
        insertRole(this.data).then((val) => {
          this.$emit('insert')
          this.confirmLoading = this.dialogVisible = false
        })
      }
    },
    handleClose () {
      return null
    }
  }
}
</script>

<style scoped>

</style>
